<template>
	<div class="seller">
		<img :src="imgsrc" />
		<div class="con">
			<p class="fix">
				<span class="brand" v-if="shop.is_premium">品牌</span><span class="name">{{shop.name}}</span>
				<span class="r ss">					
					<i v-for='ss in shop.supports' > {{ss.icon_name}}</i>
				</span>
			</p>
		
			<p class="rating fix">
				<span style="color:#ff6000;">
					<rater v-model="rate" 
						slot="value" active-color="#ffaa0c" 
						disabled :fontSize="12"
						:margin='-3' ></rater>  {{shop.rating}}</span>
				<span>月售{{shop.rating_count}}单</span>
				<span class="r" v-if="shop.delivery_mode">
					<i class="deli1">准时达</i>
					<i class="deli2">蜂鸟专送</i>
				</span>
			</p>
			<p class="fee fix">
				<span>¥{{shop.float_minimum_order_amount}}起送 </span>
				<span>/ &nbsp;配送费{{shop.float_delivery_fee}}元</span>
				<span class="time r">
					<span>{{shop.distance}}m /</span>
				<span style="color: #2395ff;">{{shop.order_lead_time}}分钟</span>
				</span>
			</p>
		</div>
	</div>
</template>

<script>
	import { Rater } from 'vux'
	export default {
		name: 'seller',
		props: ['shop'],
		components: {
			Rater
		},
		data: function() {
			return {
				rate: this.shop.rating,
				imgsrc: ''
			}
		},
		methods: {
			climg() {
				var arr = this.shop.image_path.split('')
				arr.splice(3, 0, '/');
				arr.splice(1, 0, "/");
				var str = arr.join("");
				str = str.match('png') ? str + '.png' : str + '.jpeg'
				this.imgsrc = '//fuss10.elemecdn.com/' + str + '?imageMogr/format/webp/';
			}
		},
		mounted: function() {
			this.climg();
			
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.seller {
		padding: 10px;
		border-top: solid 1px #EEE;
	}
	
	img {
		width: 86px;
		height: 86px;
		vertical-align: middle;
	}
	
	.con {
		width: calc(100% - 100px);
		display: inline-block;
		vertical-align: middle;
		padding-left: 5px;
	}
	
	.brand {
		border-radius: .053333rem;
		background-color: #ffd930;
		color: #52250a;
		font-size: 0.3rem;
		vertical-align: middle;
	}
	
	.rating {
		font-size: 0.45rem;
	}
	
	.fee {
		font-size: 0.4rem;
		color: rgb(102, 102, 102);
	}
	
	.name {
		font-weight: bolder;
		padding-left: 5px;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 5rem;
		overflow: hidden;
		color: black;
	}
	
	.ss {
		font-size: 0.5rem;
	}
	
	.ss i {
		color: rgb(153, 153, 153);
		border: solid 1px rgb(221, 221, 221);
		margin-left: 3px;
		display: inline-block;
		font-style: normal;
	}
	
	.deli1,
	.deli2 {
		font-size: .26rem;
		line-height: .35rem;
		font-style: normal;
		padding: 0 .05rem;
		border: 1px solid #44a5ff;
		border-radius: .05rem;
	}
	
	.deli1 {
		background-color: #fff;
		color: #2395ff;
	}
	
	.deli2 {
		margin-left: 5px;
		background-color: #2395ff;
		color: #fff;
	}
</style>